<template>
    <div
        ref="htmlRefHook"
        class="color border border-black"
        :style="{
            backgroundColor: color
        }"
        :class="[store.selectedColor === color && 'border-3 border-white']"
    ></div>
</template>
<style scoped>
.color {
    @apply w-6 h-6 rounded-full shadow-gray-600/80 shadow-inner;
}
.border-3 {
    border-width: 3px;
}
</style>
<script lang="ts" setup>
import { ref } from 'vue';
import { useColorStore } from '../store/Color'

import { onLongPress } from '@vueuse/core'
import { Toast } from 'vant';
const store = useColorStore()
const { color, press = true } = defineProps<{ color: string, press?: boolean }>()
const emit = defineEmits<{
    (event: "longPress", color: string, e: PointerEvent): void
}>()
const htmlRefHook = ref<HTMLElement | null>(null)
const longPressedHook = ref(false)

const onLongPressCallbackHook = (e: PointerEvent) => {
    e.preventDefault()
    longPressedHook.value = true
    emit('longPress', color, e)
    Toast({ message: '颜色填充', duration: 500, position: 'bottom' });
}
press && onLongPress(htmlRefHook, onLongPressCallbackHook, { delay: 150 })

</script>